<!--
 * @Author: zs19991020 13327343261
 * @Date: 2023-11-22 08:50:27
 * @LastEditors: zs19991020 13327343261
 * @LastEditTime: 2023-11-27 14:36:35
 * @FilePath: \村庄规划编制管理系统\src\views\home2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="home2-container">
    <div class="home2-left">
      <div class="left-top">
        <div class="message-header">
          <div><i class="icon iconfont icon-notice"></i><span>通知</span></div>
          <!-- <a href="" @click="allnoisy"
            ><span>查看更多<i class="el-icon-d-arrow-right"></i></span
          ></a> -->
        </div>
        <ul class="lefttopul" v-if="messagelist.length > 0">
          <li
            v-for="(item, index) in messagelist"
            :key="index"
            @click="openfujian(item)"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.title"
              placement="top"
            >
              <div class="listleft">
                <i class="el-icon-message"></i
                ><span class="message">{{ item.title | ellipsis }}</span>
              </div>
            </el-tooltip>
            <span class="date">{{ item.createTime }}</span>
          </li>
        </ul>
        <ul class="nomessagebox" v-else>
          🙁暂无通知~
        </ul>
      </div>
      <div class="left-bottom">
        <div class="message-header">
          <div>
            <i class="icon iconfont icon-tongji"></i><span>行政区划统计图</span>
          </div>
        </div>
        <div class="map-bottom">
          <c-map
            class="chart"
            ref="cMap"
            @changeCity="changeCity"
            :formatter="formatter"
          >
            <el-button
              v-show="citySelected || areaSelected"
              type="primary"
              class="back"
              @click="mapBack"
              circle
              ><i class="el-icon-d-arrow-left"></i
            ></el-button>
          </c-map>
        </div>
      </div>
    </div>
    <div class="home2-right">
      <div class="message-header">
        <div><i class="el-icon-s-unfold"></i><span>分类统计</span></div>
        <div>
          编制村庄总数：<span>{{ obj.total }}</span
          >个
        </div>
      </div>

      <div class="right-top">
        <div class="right-top-left">
          <div class="right-header1">
            <i class="el-icon-d-arrow-right"></i>进度统计
          </div>
          <ul>
            <li @click="queryvillagelist('villagenames')">
              <i class="iconfont icon-w_cunzhuang"></i><span>编制村庄共</span
              ><span class="num">{{ obj.total }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('progressat1')">
              <i class="iconfont icon-jishufuwu"></i><span>准备工作共</span
              ><span class="num">{{ obj.progressat1 }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('progressat2')">
              <i class="iconfont icon-tiaochawenjuan"></i>
              <span>基础调查共</span
              ><span class="num">{{ obj.progressat2 }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('progressat3')">
              <i class="iconfont icon-yijianxiang"></i>
              <span>编制方案共</span
              ><span class="num">{{ obj.progressat3 }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('progressat4')">
              <i class="iconfont icon-gonggao"></i>
              <span>咨询论证共</span
              ><span class="num">{{ obj.progressat4 }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('progressat5')">
              <i class="iconfont icon-guihua"></i>
              <span>审查审核共</span
              ><span class="num">{{ obj.progressat5 }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('progressat6')">
              <i class="iconfont icon-guihua"></i>
              <span>审批公告共</span
              ><span class="num">{{ obj.progressat5 }}</span
              ><span>个</span>
            </li>
            <!-- <li @click="queryvillagelist('progressat6')">
              <i class="iconfont icon-shenpi"></i>
              <span>成果审批共</span
              ><span class="num">{{ obj.progressat6 }}</span
              ><span>个</span>
            </li>
         -->
          </ul>
          <!-- <div class="right-header1">
            <i class="el-icon-d-arrow-right"></i>指标成果上报审核情况统计
          </div>
          <ul>
            <li @click="queryvillagelist('achievementsok')">
              <i class="el-icon-check"></i><span>审核通过共</span
              ><span class="num">{{ obj.achievementsok }}</span
              ><span>个</span>
            </li>
            <li @click="queryvillagelist('achievementsnotok')">
              <i class="el-icon-close"></i><span>审核未通过共</span
              ><span class="num">{{ obj.achievementsnotok }}</span
              ><span>个</span>
            </li>
          </ul> -->
          <div class="right-header1">
            <i class="el-icon-d-arrow-right"></i>村庄列表
          </div>
          <div class="villagelist">
            <div class="village-left">
              <div class="yellow">
                <i class="iconfont icon-yujing"></i>预警村庄共
                <span class="warningnum">{{ obj.warringcount }}</span
                >个
              </div>
              <ul v-if="warninglist.length > 0">
                <li v-for="item in warninglist" :key="item">{{ item }}</li>
              </ul>

              <div class="no-data" v-else>😊暂无预警~</div>
            </div>
            <div class="village-right">
              <div class="right-list">
                <i class="iconfont icon-liebiao"></i>村庄筛选结果列表
              </div>
              <ul v-if="villagelist.length > 0">
                <li v-for="item in villagelist" :key="item">{{ item }}</li>
              </ul>
              <div class="no-data" v-else>😊暂无数据~</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getlist } from "@/api/notice.js";
import cMap from "@/components/map";
import { userindex, citygetvillage, getvillagename } from "@/api/index2.js";
import { getMyLinkVillage } from "@/api/country.js";
export default {
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    },
  },
  components: {
    cMap,
  },
  data() {
    return {
      cityMap: null,
      areaMap: null,
      citySelected: "",
      areaSelected: "",
      warninglist: [],
      obj: {},
      currentPage: 1,
      pageSize: 10,
      villagelist: [],
      messagelist: [],
      myVillages: [],
      formatter: function (params) {
        if (!params.value) {
          params.value = 0;
        }
        return params.name + "共有" + params.value + "个村庄编制";
      },
    };
  },
  mounted() {
    this.getData();
    this.getmessage();
    getMyLinkVillage().then((res) => {
      if (res.success) {
        let cityMap = new Map();
        let areaMap = new Map();
        this.villagelist = res.data;
        res.data.map((v) => {
          let temp = v.split("-");
          if (cityMap.has(temp[0])) {
            let arr = cityMap.get(temp[0]);
            arr.push(v);
            cityMap.set(temp[0], arr);
          } else {
            cityMap.set(temp[0], [v]);
          }
          if (areaMap.has(temp[1])) {
            let arr = areaMap.get(temp[1]);
            arr.push(v);
            areaMap.set(temp[1], arr);
          } else {
            areaMap.set(temp[1], [v]);
          }
        });
        let mapList = this.$refs.cMap.mapList;
        mapList.forEach((v) => {
          let total = 0;
          if (cityMap.has(v)) {
            total = cityMap.get(v).length;
          } else {
            cityMap.set(v, []);
          }
          this.myVillages.push({
            name: v,
            value: total,
          });
        });
        this.cityMap = cityMap;
        this.areaMap = areaMap;
        this.$refs.cMap.option.visualMap.max = 40;
        this.$refs.cMap.changeMap("湖南省", this.myVillages);
      }
    });
  },
  methods: {
    getData() {
      userindex({
        city: this.citySelected,
        country: this.areaSelected,
      }).then((res) => {
        if (res.success) {
          this.obj = res.data;
          this.warninglist = res.data.warringname;
        }
      });
    },
    allnoisy() {
      this.$router.push("/allnoisy/allnoisypage");
    },
    openfujian(data) {
      this.$router.push({ path: "/message/messagebox", query: { ...data } });
    },
    async getmessage() {
      let query = {
        currentPage: 1,
        pageSize: 10,
      };
      let res = await getlist(query);
      this.messagelist = res.data.content;
    },
    queryvillagelist(name) {
      getvillagename({
        type: name,
        city: this.citySelected,
        country: this.areaSelected,
      })
        .then((res) => {
          if (res.success) {
            this.villagelist = res.data;
          } else {
            this.villagelist = [];
          }
        })
        .catch((e) => {
          this.villagelist = [];
        });
    },
    mapBack() {
      this.villagelist = [];
      if (this.areaSelected && this.citySelected) {
        this.$refs.cMap.changeMap(this.citySelected);
        this.areaSelected = null;
        this.cityMap.get(this.citySelected).forEach((v) => {
          this.villagelist.push(v);
        });
      } else if (this.citySelected && !this.areaSelected) {
        this.$refs.cMap.changeMap("湖南省", this.myVillages);
        this.citySelected = null;
        this.cityMap.forEach((v) => {
          v.map((i) => {
            this.villagelist.push(i);
          });
        });
      }
      this.getData();
    },
    changeCity(name) {
      let cityMap = this.cityMap;
      let areaMap = this.areaMap;
      let data = [];
      if (cityMap.has(name)) {
        areaMap.forEach((v, k) => {
          data.push({
            name: k,
            value: v.length,
          });
        });
        this.villagelist = cityMap.get(name).map((v) => {
          return v;
        });
        this.citySelected = name;
        this.$refs.cMap.changeData(data);
      } else if (areaMap.has(name)) {
        data = [
          {
            name: name,
            value: areaMap.get(name).length,
          },
        ];
        this.areaSelected = name;
        this.villagelist = areaMap.get(name).map((v) => {
          return v;
        });
        this.$refs.cMap.changeData(data);
      } else {
        this.villagelist = [];
        this.areaSelected = name;
      }
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.home2-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.warningnum {
  font-size: 24px;
  color: #4778c7;
  margin: 0px 5px;
}
.elpagi {
  padding: 10px 20px;
  position: absolute;
  bottom: 5px;
}
.nomessagebox {
  text-align: center;
  padding-top: 40px !important;
}
.villagelist {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: calc(100% - 350px);
  .village-left {
    width: 50%;
    height: 100%;
    .yellow {
      display: flex;
      align-items: center;
      color: #ff8247;
      margin-left: 10px;
      margin-top: 5px;
    }
    ul {
      overflow-y: auto;
    }
    li {
      color: #ffa500 !important;
      margin-top: 35px;
    }

    li:hover {
      color: #fff !important;
      background-color: rgb(255, 165, 05, 0.5) !important;
    }
  }
  .village-right {
    width: 50%;
    // height: 330px;
    ul {
      margin-top: 10px !important;
      // height: 295px;
      overflow-y: auto;
    }
    .right-list {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      color: #4778c7;
    }
  }
  ul {
    div {
      margin-bottom: 20px;
    }

    li {
      border: 0.5px solid #ccc !important;
      border-radius: 5px !important;
      color: #4778c7;
      box-shadow: 2px 2px 1px #888888;
      text-align: left !important;
      margin-top: 5px;
      &:hover {
        color: #4778c7 !important;
        background-color: rgb(202, 225, 255, 0.3) !important;
      }
    }
  }

  i {
    margin-right: 10px;
  }
}
.right-header1 {
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  border-left: 3px solid #4778c7;

  background-image: linear-gradient(to right, rgba(220, 220, 220, 0.5), #fff);
}
.header1-bottom {
  margin-top: 10px;
}

.message-header {
  color: #4778c7;
  line-height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  background-image: linear-gradient(to right, #fff, rgba(220, 220, 220, 0.5));
  i {
    margin-right: 10px;
  }
  span {
    font-weight: 600;
    font-weight: 18px;
    letter-spacing: 2px;
  }
}
.home2-right {
  width: 48%;
  height: calc(100% - 30px);
  margin: 10px;
  background-color: #fff;
  position: relative;
  .right-top {
    height: calc(100% - 35px);
    display: flex;
    justify-content: space-between;
    .right-top-left {
      width: 100%;
      height: 100%;

      ul {
        margin: 0;
        padding: 10px;
        max-height: 485px;
        list-style: none;
        .disabled {
          pointer-events: none;

          i {
            color: #141312;
          }
          .num {
            color: #ff8247;
          }
        }
        li {
          line-height: 40px !important;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          border: 1px solid #ccc;
          &:hover {
            background-color: rgb(202, 225, 255, 0.9);
            color: #fff;
            i {
              color: #fff;
            }
            .num {
              color: #fff;
            }
          }
          i {
            margin-right: 5px;
            font-size: 28px;
            color: #4778c7;
          }
          .num {
            font-weight: 600;
            font-size: 24px;
            margin: 0px 5px;
            color: #4778c7;
          }
        }
      }
    }
    // .right-top-right {
    //   width: 55%;
    //   height: calc(100% - 35px);
    //   position: relative;
    //   ul {
    //     margin: 0;
    //     padding: 10px;
    //     list-style: none;

    //     overflow-y: auto;
    //     li {
    //       line-height: 60px;
    //     }
    //   }
    // }
  }
}
.home2-left {
  width: 50%;
  height: calc(100% - 30px);
  position: relative;
  .left-top {
    margin: 10px;
    overflow: auto;
    background-color: #fff;
    width: 100%;
    height: 50%;
    position: relative;
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        line-height: 35px;
        padding: 0px 20px;
        border-bottom: 1px dashed #ccc;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: space-between;
        .listleft {
          display: flex;
          align-items: center;
        }
        .message {
          font-weight: 300;
        }
        &:hover {
          .message {
            color: #4778c7;
            font-weight: 700;
          }
          i {
            color: #4778c7;
          }
        }
        i {
          margin-right: 10px;
          font-size: 20px;
          font-weight: 600;
        }
        .date {
          margin-left: 10px;
          color: #4778c7;
        }
      }
    }
  }
  .left-bottom {
    width: 100%;
    height: calc(50% - 30px);
    margin: 10px;
    background-color: #fff;
    position: relative;
    .map-bottom {
      position: absolute;
      height: calc(100% - 35px);
      width: calc(100% - 20px);
    }
  }
}
.no-data {
  margin-left: 25px;
  margin-top: 45px;
  color: #888888;
  font-size: 14px;
}
.back {
  position: absolute;
  left: 10px;
  top: 10px;
}
</style>
